<template lang="pug">
  div
    v-particles.banner
      .bg
      .info
        .headimg
          img(:src='webconfig.avatar', v-if="webconfig.avatar")
        .name {{webconfig.author}}
        .ps {{webconfig.introduce}}
        v-links
        .slogan {{webconfig.slogan}}
    .page-body-content
      p 关于页面也是什么都没有，还是回
        nuxt-link(to="/") 首页
        | 吧。
</template>

<script>
import vParticles from '~/components/common/particles'
export default {
  components: {
    vParticles
  },
  computed: {
    webconfig() {
      return this.$store.state.webconfig
    }
  }
}
</script>

<style lang="stylus" scoped>
.banner
  width 100%
  height 3.5rem
  overflow hidden
  display flex
  align-items center
  justify-content center
  // background $Blue 
  position relative
  &:hover
    .bg
      transform scale(1.08)
      filter blur(2px) sepia(30%)
  .bg
    position absolute
    z-index 0
    width 100%
    height 100%
    left 0
    top 0
    background url('~/assets/img/about_bg.jpg') center center no-repeat
    background-size cover
    transition all 1s
    transform scale(1.05)
    filter blur(0.5px) sepia(70%)
  .info
    width auto
    display flex
    flex-flow column nowrap
    align-items center
    justify-content center
    position relative
    z-index 3
    .headimg
      width .8rem
      height .8rem
      overflow hidden
      border-radius 50%
      border .03rem solid rgba(255,255,255,0.6)
      img
        width 100%
        height 100%
    .name
      font-size .16rem
      margin-top .14rem
      color $White
    .ps
      margin-top .1rem
      color rgba(255,255,255,0.8)
    .links
      margin-top .18rem
    .slogan
      margin-top .08rem
      color rgba(255,255,255,0.8)
      transform scale(0.9)

</style>